上一篇介紹了如何用 CDN 的方式使用 Vue,然後建立一個 Vue 的應用程式,接下來幾天會介紹
在 Vue 裡常用的一些語法。
能夠將 data 和 HTML 的屬性作綁定,只要在欲綁定的屬性前面加上 v-bind: ,而值則是 data 的內容,就可以囉!
讓我們來看下面的範例:
我們來把 message 和 HTML 的 title 屬性綁定
<div id="app">
<p v-bind:title="message">這是標題</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
這時當你的滑鼠移動到 p 段落上時,就可以看到 message 的內容了。
而這裡一樣可以利用 app.message 的方式直接更改綁定的值,如同上一篇所講的一樣, Vue 是操作資料形態來渲染頁面的。
如果覺得每次都要打 v-bind 很麻煩的話,其實他是有縮寫的,讓我們來看看下面例子:
<!-- 完整寫法 -->
<div id="app">
<p v-bind:title="message">這是標題</p>
</div>
<!-- 縮寫 -->
<div id="app">
<p :title="message">這是標題</p>
</div>
只要將前面的 v-bind 省略就可以了,有沒有發現很簡單呢?
大家可以用昨天的範例作練習唷!
那麼,明天再見囉!